<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.prime.com.tr/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <title>Ocorrência</title>
    </h:head>
    <h:body>
        <h:form id="form">
          
       <p:panel header="Registrar Ocorrência">
       <p:messages />
         <h:panelGrid columns="2">                        
           
            <h:outputLabel value="Endereço:" for="end" />
            <p:inputText id="end" label="end" value="#{ocorrrenciaManagedBeans.ocorrencia.endereco}" maxlength="14" size="40"  />

            <h:outputLabel value="Ocorrido:" for="oco" />
            <p:inputTextarea id="oco" label="end" value="#{ocorrrenciaManagedBeans.ocorrencia.ocorrido}" rows="6" cols="33"  />
            
            <h:outputLabel value="Usuário:" for="usu" />
            <p:inputText id="usu" label="end" value="#{ocorrrenciaManagedBeans.ocorrencia.usuario}" maxlength="14" size="40"  />

            
            
            <p:commandButton id="btnSalvar" value="SALVAR" actionListener="#{ocorrrenciaManagedBeans.salvar}" update="form" />
          </h:panelGrid>

            <!-- tabela, incluido no value a lista de ocorrencias, definino um variavel de acesso para cada registro, para acessar um unico registro-->
            <p:dataTable id="tabela" value="#{ocorrrenciaManagedBeans.ocorrencias}" var="ocorr" emptyMessage="Nenhum registro incluido." paginator="true" rows="10">
                <!--  cabeçalho da Tabela-->
                <f:facet name="header">  
                    Lista de Ocorrências  
                </f:facet>
                <!-- coluna para receber um determinando dado que tem em um objeto da nossa lista-->
                <p:column headerText="ENDEREÇO" style="text-align: center">
                    <!--Aqui onde acesso o objeto OCORR.ENDERECO e apresentamos na tabela, e assim com os seguintes-->
                    <h:outputText value="#{ocorr.endereco}" />
                </p:column>
                <p:column headerText="FATO OCORRIDO" style="text-align: center">
                   
                    <h:outputText value="#{ocorr.ocorrido}" />
                </p:column>
                <p:column headerText="USUÁRIO" style="text-align: center">
                    <h:outputText value="#{ocorr.usuario}" />
                </p:column>
                
                <p:column headerText="ALTERAR - EXCLUIR" style="text-align: center">
                    <!--Abaixo o botão editar com uma Action do nosso metodo editar que criamos no Bean-->
                    <p:commandButton action="#{ocorrrenciaManagedBeans.editar}" value="EDITAR" title="Editar" ajax="false"  >
                        <!-- Abaixo temos o setPropertyActionListener que é utilizado para pegar o objeto cli e setar no objeto cliente la no nosso bean, para editarmos-->
                        <f:setPropertyActionListener value="#{ocorr}" target="#{ocorrrenciaManagedBeans.ocorrencia}" />
                    </p:commandButton>
                    <!-- Abaixo temos o botão excluir com a propriedade onclick contendo o nome do modal e acessando um método de abri-lo que é o show, também existe o hide que é para feixa-lo.-->
                    <p:commandButton value="EXCLUIR" title="Excluir" onclick="confirmation.show()" style="margin-left: 5px" >
                        <!-- Abaixo temos o setPropertyActionListener que é utilizado para pegar o objeto cli e setar no objeto cliente la no nosso bean, para posteriomente excluirmos-->
                        <f:setPropertyActionListener value="#{ocorr}" target="#{ocorrrenciaManagedBeans.ocorrencia}" />
                    </p:commandButton>
                </p:column>
            </p:dataTable>
        </p:panel>
        </h:form>   
        <!-- Abaixo temos um modal de confirmação de exclusão repare que ele é fora do form principal, pois se colocarmos dentro podemos ter alguns problemas com isso.-->
        <h:form id="dlg">
            <p:confirmDialog message="Deseja realmente excluir este registro?" hideEffect="explode" header="Aviso" severity="alert" widgetVar="confirmation" modal="true">
                <!--caso seja sim chamo o metodo excluir, e fecho o modal com o oncomplete, tenho o process que estou dizendo para processar o form, e update para atualizar a tabela-->
                <p:commandButton id="btnSim" value="Sim" oncomplete="confirmation.hide();" actionListener="#{ocorrrenciaManagedBeans.excluir}" process="@form" update="form:tabela" />
                <!--caso seja não somente fecha o modal-->
                <p:commandButton id="btnNao" value="Não" onclick="confirmation.hide();" type="button"/>
            </p:confirmDialog>
        </h:form>
    </h:body>
</html>
